<!--
 * @Author: 赖钊亮
 * @Description: 会员中心界面
 * @Date: 2020-07-02 10:40:16
 * @LastEditTime: 2020-07-03 10:02:38
 * @LastEditors: Please set LastEditors
 * @FilePath: \mobile_item_121f:\JK\jkshopping\src\pages\my\components\vip.vue
--> 
<template>
  <div>
    <!--会员中心顶部 -->
    <van-nav-bar title="会员中心" left-text="返回" left-arrow @click-left="goBack" />

    <!-- 会员中心 -->
    <div class="vip">
      <!-- 会员中心背景色 -->
      <div class="vip-color">
        <van-row>
          <van-col span="7">
            <div class="headimg">
              <!-- 头像 -->
              <div class="Himg">
                <div class="Himg1">
                  <van-image :src="this.vip.avatar" round />
                </div>
              </div>
              <!-- 昵称 -->
              <div class="name">
                <p>{{this.vip.username}}</p>
              </div>
              <!-- 等级图标 -->
              <div class="level-icon">
                <van-image :src="this.levels.logo" />
              </div>
              <!-- 经验 -->
              <div class="experience">
                <span class="experience-1"></span>
                <span class="experience-2"></span>
                <p class="text">
                  <span>经验值：112，距离Lv3还差88经验</span>
                </p>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- 等级特权 -->
    <div class="level">
      <span>等级特权</span>
      <van-grid :column-num="5" square>
        <van-grid-item :icon="this.levels.logo" text="等级1" />
        <van-grid-item :icon="this.levels.logo" text="等级2" />
        <van-grid-item :icon="this.levels.logo" text="等级3" />
        <van-grid-item :icon="this.levels.logo" text="等级4" />
        <van-grid-item :icon="this.levels.logo" text="等级5" />
      </van-grid>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/apiList/user/user.js";
export default {
  data() {
    return {
      vip: "",//用户信息
      levels: ""//等级图标
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 获取用户数据
    async API_user_info() {
      return await api.user_info();
    }
  },
  // 用户数据
  async created() {
    let res = await api.user_info();
    if (res.data.code === 200) {
      this.vip = res.data.data.user;
      this.levels = res.data.data.user.levels;
    }
  }
};
</script>

<style lang="scss" scoped>
//顶部
.van-nav-bar {
  background-color: #d8c593;
}
//标题
/deep/ .van-nav-bar__title {
  color: white;
}
//返回
/deep/ .van-nav-bar__text {
  color: white;
}
//箭头
/deep/ .van-nav-bar .van-icon {
  color: white;
}
.vip {
  display: block;
  .vip-color {
    background-color: #d8c593;
    width: 100%;
    height: 150px;
  }
}
//头像
.headimg {
  width: 100%;
  .Himg {
    background-color: rgb(243, 243, 243);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-left: 60px;
    margin-top: 50px;
    .Himg1 {
      background-color: rgb(238, 236, 236);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      position: absolute;
      left: 70px;
      top: 105px;
      .van-icon {
        display: block;
        color: white;
        font-size: 20px;
        text-align: center;
        line-height: 30px;
      }
    }
  }
  //昵称
  .name {
    width: 100%;
    margin-left: 130px;
    margin-top: -50px;
    color: white;
  }
  //等级图标
  .level-icon {
    margin-left: 190px;
    margin-top: -20px;
    width: 17%;
  }
  .experience {
    margin-left: 130px;
    margin-top: 5px;
    .experience-1 {
      display: block;
      width: 50px;
      height: 10px;
      background: #ffd162;
    }
    .experience-2 {
      display: block;
      margin-left: 50px;
      margin-top: -10px;
      width: 160px;
      height: 10px;
      background-color: #e0d3af;
    }
  }
  .text {
    width: 187px;
    color: white;
  }
}
//等级
.level {
  background-color: white;
  width: 100%;
  height: 30px;
  span {
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 50px;
    line-height: 30px;
  }
}
</style>